<%@ page language="java" contentType="text/html; charset=UTF-8"
  isErrorPage="true"  pageEncoding="UTF-8"%>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<style>
body{
	margin: 0px auto;
	padding-top: 120px;
	padding-left: 30%;
}
dl dd div{
	font-size:12px;
}
dt,dd{
	float:left;
	margin:0px;
	border:0px;
	padding:0px;
}
dl{
	clear:both;
	line-height: 22px;
}
dt{
	width:110px;
	text-align:right;
	font-size:14px;
	height:30px;
	line-height:25px;
}
dd{
	font-size:12px;
	color:#666666;
	height:30px;
	line-height:30px;
	vertical-align:middle;
	padding-left:10px;
}
.ext{
	height: 50px;
}
</style>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
  var proRoot="${pageContext.request.contextPath}/";
</script>
<script src="../js/checkLoginName.js"></script>
</head>
<body>
  <form action="${pageContext.request.contextPath}/AddUserAndHead" method="post" enctype="multipart/form-data">
    <dl>
     <dt>账号：</dt>
     <dd><input placeholder="请输入账号" id="loginName" name="loginName"  /></dd>
     <dd>请输入账号</dd>
     </dl>
    <dl>
     <dt>真实名字：</dt>
     <dd><input placeholder="请输入真实姓名" name="userName" /></dd>
     <dd>请输入真实名字</dd>
    </dl>
     <dl>
     <dt>密码：</dt>
     <dd><input type="password" placeholder="请输入密码" name="password" /></dd>
     <dd>请输入密码</dd>
    </dl>
     <dl>
     <dt>性别：</dt>
     <dd><input type="radio" checked="checked" name="sex" value="1" />男<input type="radio" name="sex" value="0" />女</dd>
     <dd>请选择性别</dd>
    </dl>
     <dl>
     <dt>图片上传：</dt>
     <dd><input type="file" name="picOne" id="picOne" /></dd>
     <dd>
       <img onerror="setDef(this)"  src ="${pageContext.request.contextPath}/images/df.jpg"  height="150px" id="imgShow" />
     </dd>
     </dl>
     <dl>
     <dt></dt>
     <dd><input type="submit" value="用户注册" /></dd>
     <dd><input type="reset" /></dd>
    </dl>
  </form>
  <script>
  function setDef(e) {
 	 e.src ="${pageContext.request.contextPath}/images/df.jpg";
	}
   
	  //加载html完毕后执行load事件
	  window.onload=function () {
		 
		//当选择图片发生变化时触发绑定事件
	  	document.getElementById("picOne").onchange=function () {
	  		var ext= this.value.substring(this.value.lastIndexOf(".")).toLowerCase();
			var url="../images/df.jpg";
			if(ext!=".png" && ext!=".jpg" && ext!=".jpeg" && ext!=".gif"){
				this.value="";
			}else{
				var file=this.files[0];
				url=window.URL.createObjectURL(file);
			}
			//显示预览图片
			document.getElementById("imgShow").setAttribute("src",url);
	  	}//选择图片发生变化时触发绑定事件结束
	  }//结束load事件
  </script>
</body>
</html>